App Icon

hr.icon

すべてのアプリケーションには、App Storeで注目を集め、ホーム画面で目立つ、美しく印象的なアイコンが必要です。

アイコンは、アプリの目的をひと目で伝える最初の機会です。アイコンは、設定や検索結果など、システム全体に表示されます。

https://gyazo.com/0cb51e24f4422047fcd0180f04fd7af0

シンプルさを追求する。

アプリの本質を表す1つの要素を見つけ、その要素をシンプルでユニークな形で表現します。

ディテールの追加は慎重に。

アイコンの内容や形が複雑になりすぎると、特に小さいサイズではディテールがわかりにくくなります。

フォーカスポイントは1つにする。

アイコンをデザインする際には、注目を集め、アプリを明確に識別できるように、1つの中心となるポイントを設定します。

認識できるアイコンをデザインする。

アイコンが何を表しているのかを理解するために、アイコンを分析する必要はありません。

例えば、メールアプリのアイコンは、一般的に郵便物を連想させる「封筒」を使用しています。

アプリの目的を芸術的に表現した、美しく魅力的な抽象的アイコンを時間をかけてデザインしてください。

背景はシンプルにして、透明性は避けます。

アイコンを不透明にして、背景をごちゃごちゃさせないようにしましょう。

シンプルな背景にして、近くにある他のアプリのアイコンを圧倒しないようにしましょう。

また、アイコン全体をコンテンツで埋め尽くす必要はありません。

文字は必要不可欠なものか、ロゴの一部として使うだけにしましょう。

ホーム画面では、アイコンの下にアプリの名前が表示されます。

"Watch "や "Play "のように、名前を繰り返したり、アプリで何をするのかを伝えたりする、必要のない言葉は入れないようにしましょう。

デザインにテキストが含まれる場合は、アプリが提供する実際のコンテンツに関連する言葉を強調します。

写真、スクリーンショット、インターフェース要素は含めないでください。

写真の詳細は、小さなサイズでは非常に見づらくなります。

スクリーンショットは、アプリのアイコンとしては複雑すぎ、一般的にアプリの目的を伝えるのには役立ちません。

アイコンにインターフェース要素が含まれていると、誤解を招きやすく、混乱を招く恐れがあります。

Appleのハードウェア製品の複製を使用しないでください。

Apple製品には著作権があり、アイコンや画像で複製することはできません。

一般的に、ハードウェアのデザインは頻繁に変更される傾向があり、アイコンが古く見える可能性があるため、デバイスのレプリカの表示は避けてください。

アプリアイコンをインターフェイス全体に配置しない。

1つのアイコンがアプリ内で異なる用途に使われていると、混乱を招く恐れがあります。

代わりに、アイコンのカラースキームを取り入れることを検討してください。

アイコンをさまざまな壁紙でテストする。

人々がホーム画面にどのような壁紙を選ぶかを予測することはできません。

そのため、アプリを明るい色や暗い色でテストするだけではありません。

異なる写真の上でどのように見えるかを確認しましょう。

実際のデバイスでは、デバイスの動きに合わせて背景の見え方が変わるようなダイナミックな背景で試してみましょう。

アイコンの角を四角くする。

アイコンの角を丸くするマスクが自動的に適用されます。

App Icon Attributes

すべてのアプリアイコンは、以下の仕様に準拠する必要があります。

table: Attribute - Value

Attribute Value

Format PNG

Color space Display P3 (wide-gamut color), sRGB (color), or Gray Gamma 2.2 (grayscale). See Color Management.

Layers Flattened with no transparency

Resolution Varies. See Image Size and Resolution.

Shape Square with no rounded corners

App Icon Sizes

すべてのアプリケーションは、アプリケーションがインストールされたときにホーム画面やシステム全体に表示される小さなアイコンと、App Storeで表示される大きなアイコンを用意する必要があります。

https://gyazo.com/49f5ea44aa7c5d64d5ad34f7df7082ba

table: Device or context - Icon size

Device or context Icon size

iPhone 60x60 pt (180x180 px @3x)

60x60 pt (120x120 px @2x)

iPad Pro 83.5x83.5 pt (167x167 px @2x)

iPad, iPad mini 76x76 pt (152x152 px @2x)

App Store 1024x1024 pt (1024x1024 px @1x)

デバイスごとに異なるサイズのアイコンを用意する。

サポートしているすべてのデバイスで、アプリのアイコンがきれいに見えるようにしましょう。

App Storeのアイコンを使って小さいアイコンを模倣する。

App Storeのアイコンは小さいアイコンとは使用方法が異なりますが、アプリのアイコンであることに変わりはありません。

外観は小さいアイコンとほぼ同じですが、ビジュアルエフェクトが適用されていないため、微妙にリッチで詳細な表現になっている可能性があります。

Spotlight, Settings, and Notification Icons

すべてのアプリは、アプリの名前がSpotlight検索の語句と一致したときにiOSが表示できる小さなアイコンも提供する必要があります。

さらに、設定を備えたアプリは、内蔵の設定アプリに表示される小さなアイコンを提供する必要があります。

また、通知をサポートするアプリは、通知に表示される小さなアイコンを提供する必要があります。

すべてのアイコンは、アプリを明確に識別する必要があります。

理想的には、アプリのアイコンと一致している必要があります。

これらのアイコンを提供していない場合、iOSはこれらの場所に表示されるプライマリアプリのアイコンを縮小することがあります。

https://gyazo.com/3db6045927fc557c7e0b80a5b9551a83

https://gyazo.com/8d555d1130b2e75877b79317ca25f7cb

table: Device - Spotlight icon size

Device Spotlight icon size

iPhone 40x40 pt (120x120 px @3x)

40x40 pt (80x80 px @2x)

iPad Pro, iPad, iPad mini 40x40 pt (80x80 px @2x)

table: Device - Settings icon size

Device Settings icon size

iPhone 29x29 pt (87x87 px @3x)

29x29 pt (58x58 px @2x)

iPad Pro, iPad, iPad mini 29x29 pt (58x58 px @2x)

table: Device - Notification icon size

Device Notification icon size

iPhone 20x20 pt (60x60 px @3x)

20x20 pt (40x40 px @2x)

iPad Pro, iPad, iPad mini 20x20 pt (40x40 px @2x)

設定アイコンにオーバーレイやボーダーを追加しないでください。

iOSは、設定の白い背景に映えるように、すべてのアイコンに1ピクセルのストロークを自動的に追加します。

Tips

アプリケーションがカスタムドキュメントを作成する場合、iOSはアプリアイコンを使ってドキュメントアイコンを自動的に作成するので、ドキュメントアイコンをデザインする必要はありません。

User-Selectable App Icons

アプリによっては、カスタマイズが個人的なつながりを呼び起こし、ユーザー体験を向上させる機能になっているものもあります。

アプリに価値がある場合は、アプリ内に埋め込まれた定義済みのアイコンのセットから、ユーザーが別のアプリのアイコンを選択できるようにすることができます。

例えば、スポーツアプリでは、異なるチームのアイコンを提供したり、ライトモードとダークモードを持つアプリでは、対応するライトとダークのアイコンを提供したりすることができます。

提供した代替アプリのアイコンを選択できるのはユーザーのみで、ユーザーがこの変更を行ったときには、システムが常に確認を行います。

視覚的に一貫した代替アイコンを、必要なすべてのサイズで提供します。

プライマリアプリアイコンと同様に、各代替アプリアイコンも、サイズが異なる関連画像の集合体として提供します。

ユーザーが代替アイコンを選択すると、ホーム画面やSpotlightなどのシステム上で、プライマリアプリのアイコンが適切なサイズの代替アイコンに置き換えられます。

代替アイコンがシステム全体に一貫して表示されるように、プライマリアプリのアイコンと同じサイズのアイコンを用意してください。

注意